<template>
  <div>
    <h1>{{ msg }}</h1>
    <!-- <button @click="changeMsg">点击改变</button> -->
  </div>
</template>

<script>
// reactive处理的数据 必须是复杂类型，如果是简单类型无法处理成响应式，所以有ref函数
//对传入的数据（简单类型数据），包裹一层对象，转换成响应式
// 1.ref函数接收到一个的值，返回一个ref响应式对象，有唯一的属性value
// 2.在setup函数中，通过ref对象的value属性，可以访问到值
// 3.在模板中，ref属性会自动解套，不需要额外的value
// 4.ref属性也支持传入复杂类型，传入复杂类型，也会做响应式处理
import { reactive, ref } from 'vue';
export default {
  setup() {
    let msg = ref('hello');
    console.log(msg);
    return { msg };
  },
};
</script>
